<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container"> </div>
    <script>
    let data = {
        "Fish": {
          "trout": {},
          "salmon": {}
        },
        "Tree": {
          "Huge": {
            "sequoia": {},
            "oak": {}
          },
          "Flowering": {
            "apple tree": {},
            "magnolia": {}
          }
        }
      };
      function createTree(container, obj) {
        container.innerHTML = createTreeText(obj);
      }
  
      function createTreeText(obj) { // standalone recursive function
        let li = '';
        let ul;
        for (let key in obj) {
          li += '<li>' + key + createTreeText(obj[key]) + '</li>';
        }
        if (li) {
          ul = '<ul>' + li + '</ul>'
        }
        return ul || '';
      }
  
      createTree(container, data);
      //OSCHINA 花乐天
      </script>
</body>
</html>